<template>
  <nav class="navbar navbar-expand-sm navbar-dark bg-dark mb-4">
    <div class="container">
      <!-- <a class="navbar-brand" href="landing.html">米修在线</a> -->
      <router-link to="/" class="navbar-brand">知友在线</router-link>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mobile-nav">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="mobile-nav">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item">
            <!-- <a class="nav-link" href="profiles.html"> 米修在线
            </a>-->
            <router-link to="/Profiles" class="nav-link">之友</router-link>
          </li>
        </ul>

        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <router-link to="/Feed" class="nav-link">留言</router-link>
          </li>
          <li class="nav-item">
            <router-link to="/dashboard" class="nav-link">个人信息</router-link>
          </li>
          <li class="nav-item">
            <router-link to="/register" class="nav-link" v-show="!islogin">注册</router-link>
          </li>
          <li class="nav-item">
            <router-link to="/login" class="nav-link" v-show="!islogin">登录</router-link>
            <!-- <a class="nav-link" href="login.html">登录</a> -->
          </li>
          <li class="nav-item">
            <a v-show="islogin" class="nav-link">
              <img class="rounded-circle headerImg mr-2" alt="user.name" :src="user.avatar">
              <span class="point" @click="logout">退出</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</template>

<script type="text/ecmascript-6">
export default {
  data() {
    return {};
  },
  components: {},
  computed: {
    islogin() {
      if (this.$store.getters.isAuthenticated) {
        return true;
      } else {
        return false;
      }
    },
    user() {
      return this.$store.getters.user;
    }
  },
  methods: {
    logout() {
      //删除token
      window.localStorage.removeItem("jwt");

      //重置用户状态
      this.$store.dispatch("setIsAuthenticated", false);
      //重置用户信息
      this.$store.dispatch("setUser", {});
      this.$store.dispatch("setProfile", null);
      //跳转页面
      this.$router.push("/login");
    }
  }
};
</script>

<style scoped>
.headerImg {
  width: 25px;
}
.point {
  cursor: pointer;
}
</style>
